<template>
    <div class="c-notice c-first">
        <div class="c-first-item">
            <c-title>
                比赛文件
            </c-title>
            <div class="c-notice-table">
                <div class="c-notice-item" v-for="(item,index) in list" :class="{'notice-item-active': index == active}" @mouseenter="touch(index)">
                    <div>{{item.title}}</div>
                    <div>
                        <a :href="item.con" :download="item.title">下载</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { cTitle } from '../../../components/main';
    export default {
        name:'file',

        data() {
            return {
                active:0,

                list:[
                    {
                        title:'“国学达人”报名表格'
                    },
                    {
                        title:'“国学达人”报名表格'
                    },
                    {
                        title:'“国学达人”报名表格'
                    },
                    {
                        title:'“国学达人”报名表格'
                    }
                ]
            }
        },

        methods: {
            touch(i) {
                this.active = i;
            }
        },

        components:{
            cTitle
        },

        mounted() {
            this.axios.get('get_files').then(data => {
                data = data.data;
                this.list = data;
            })
        }
    }
</script>

<style lang="less" scoped rel="stylesheet/less" type="text/css">
    @import "../../../plugins/assets/css/flex.less";

    .c-first{
        width: 50%;
        margin: 50px auto;
        .c-notice-table{
            border-bottom:1px dashed #EBE8DE;
            border-top:1px dashed #EBE8DE;
            .c-notice-item {
                .box-sizing;
                .flex-between;
                border-bottom:1px dashed #EBE8DE;
                border-left:5px solid transparent;
                padding: 15px 30px;
                cursor: pointer;
                font-size: 14px;
                > :last-child {
                    width: 15%;
                    text-align: right;
                    a {
                        background: #E9DAA7;
                        border:1px solid #CFA972;
                        color: #CFA972;
                        padding: 5px 15px;
                        text-decoration: none;
                    }
                }
                > :first-child {
                    width: 50%;
                }
            }
            .notice-item-active {
                background:#FEE6DD;
                border-left:5px solid #B12828;
            }
        }
    }
    @media screen and (max-width: 768px) {
        .c-first{
            width: 90%;
            margin: 50px auto;
            .c-notice-table{
                border-bottom:1px dashed #EBE8DE;
                border-top:1px dashed #EBE8DE;
                .c-notice-item {
                    .box-sizing;
                    .flex-between;
                    border-bottom:1px dashed #EBE8DE;
                    border-left:5px solid transparent;
                    padding: 5vw 5vw;
                    cursor: pointer;
                    font-size: 14px;
                    > :last-child {
                        width: 35%;
                        text-align: right;
                        a {
                            background: #E9DAA7;
                            border:1px solid #CFA972;
                            color: #CFA972;
                            padding: 5px 15px;
                            text-decoration: none;
                        }
                    }
                    > :first-child {
                        width: 50%;
                    }
                }
                .notice-item-active {
                    background:#FEE6DD;
                    border-left:5px solid #B12828;
                }
            }
        }
    }
</style>